<template>
	<div>
    <ul class="list">
      <li class="item"
          v-for="item of letters"
          :key="item"
          :ref="item"
          @click="handleletclick"
          @touchstart.prevent="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleend"
      >
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
	export default {
		name: "CityAlphabet",
    props:{
		  cities: Object
    },
    computed:{
        letters () {
          const letters = []
          for (let i in this.cities) {
            letters.push(i)
          }
          return letters
        }
    },
    data () {
		  return{
		      touchStatus: false,
          startY: 0,
          timer: null
      }
    },
    updated () {
		  /*让第一次的Y轴的值为计算好的离顶部的距离,这样能提高性能*/
        this.startY = this.$refs['A'][0].offsetTop;
    },
    methods: {
      handleletclick (e) {
          this.$emit('change', e.target.innerText)
      },
      handleTouchStart () {
          this.touchStatus = true
      },
      //滑动算法
      handleTouchMove (e) {
          if (this.touchStatus) {
            if (this.timer) {
              clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
              const touchY = e.touches[0].clientY - 79;
              const index = Math.floor((touchY - this.startY) / 20);
              if (index >= 0 && index < this.letters.length) {
                this.$emit('change', this.letters[index]);
              }
            },16)
          }
      },
      handleend () {

      }
    }
	}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
  .list
    display flex
    flex-direction column
    justify-content center
    position absolute
    right 0
    top 1.58rem
    width .4rem
    bottom 0
    .item
      line-height .4rem
      text-align center
      color $bgColor
</style>
